<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="__STATIC__/css/mui.min.css"/>
    <link rel="stylesheet" href="__STATIC__/css/common.css">
    <link rel="stylesheet" href="__STATIC__/css/module.css"/>
    <script src="__STATIC__/js/jquery.min.js"></script>
    <script src="__STATIC__/js/mui.min.js"></script>
    <script src="__STATIC__/js/mui.picker.min.js"></script>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
    <h1 class="mui-title">订单详情</h1>
</header>
<div class="mui-bar mui-bar-tab order-detail-bottom" style="padding: 0;">
    <div class="flex">
        <p class="flex-1 final">实付总额（约为）：<span>￥{$amount}</span></p>
        <a href="#" class="order-tj" onclick="suborder('{$cartids}')">提交订单</a>
    </div>
</div>
<div class="mui-content order-wrap">
    <!--<ul class="mui-table-view mart10">-->
        <!--<li class="mui-table-view-cell">-->
            <!--订单号：100005-->
        <!--</li>-->
    <!--</ul>-->
    <ul class="mui-table-view mui-table-view-chevron order-wrap-tr1">
        <li class="mui-table-view-cell mui-media order-wrap-td1">
            <a href="#" class="mui-navigate-right">
                <div class="mui-media-body">
                    <div class="info-ico name mui-pull-left">孙思思</div>
                    <div class="info-ico phone mui-pull-left">13718851650</div>
                    <div class="mui-clearfix"></div>
                    <p class='mui-ellipsis'>北京北京 朝阳区 北苑东路 中国铁建广场C座203</p>
                </div>
                <input type="hidden" id="address_id" value="2"/>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media order-wrap-td2">
            {volist name="goodslist" id="vo"}

            <a href="#" class="mui-navigate-right mui-clearfix">
                <img src="{$vo.goods_pic}" alt="">
                <div class="con mui-media-body padl10">
                    <h4 class="mui-ellipsis font16">{$vo.short_name}</h4>
                    <p class="guige">x{$vo.buy_num}</p>
                    {if condition="$vo.buy_type eq '1'"}
                    <div class="color-e40000">￥{$vo.buy_price}/个</div>
                    {else}
                    <div class="color-e40000">￥{$vo.buy_price}/斤</div>
                    {/if}
                </div>
            </a>
            {/volist}
            <div class="tip">*部分商品因为无法精确到整斤，最后金额以实际称重为准，给您带来不便敬请谅解！</div>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a class="mui-navigate-right" href="#choice-pay">
                支付方式<p class="mui-pull-right" id="pay-inner">在线支付</p>
            </a>
            <input type="hidden" id="pay_type" value="1" />
        </li>
        <li class="mui-table-view-cell mui-media" style="padding-right: 15px;">
            <input placeholder="给商家留言（选填）:" id="buy_msg" value="" type="text">
        </li>
        <li class="mui-table-view-cell mui-media order-wrap-td6">
            <a class="mui-navigate-right" href="#choice-yhq">
                <div class="mui-pull-left">使用优惠券<span class="mui-badge mui-badge-danger">1</span></div>
                <p class="mui-pull-right" id="yhq-inner">满50减5</p>
            </a>
            <input id="quan_id" value="0" type="hidden" />
        </li>
    </ul>
    <ul class="mui-table-view mart10">
        <li class="mui-table-view-cell">
            商品总额 <p class="mui-pull-right color-e40000">￥{$goodstotal}</p>
        </li>
        <li class="mui-table-view-cell">
            配送费 <p class="mui-pull-right color-e40000">￥{$postfee}</p>
        </li>
        <li class="mui-table-view-cell">
            优惠券 <p class="mui-pull-right color-e40000">￥0.00</p>
        </li>
        <li class="mui-table-view-cell">
            实付金额（约为） <p class="mui-pull-right color-e40000">￥{$amount}</p>
        </li>
    </ul>
    <p class="pad10"><span style="color: #cb0000">*</span>注：因本商品无法每次都精确到整斤，如超出所选范围，以实际称重为准</p>
</div>
<div id="choice-pay" class="mui-popover mui-popover-action mui-popover-bottom">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="javascript:;" id="pay_2" class="sex-c">在线支付</a>
        </li>
        <li class="mui-table-view-cell">
            <a href="javascript:;" id="pay_1" class="sex-c">货到付款</a>
        </li>
    </ul>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#choice-pay"><b>取消</b></a>
        </li>
    </ul>
</div>
<div id="choice-yhq" class="mui-popover mui-popover-action mui-popover-bottom">
    <div class="choice-yhq mui-clearfix posr">
        <h4 class="mui-clearfix">选择优惠券 <a href="#choice-yhq" class="mui-pull-right"><span class="mui-icon mui-icon-close"></span></a></h4>
        <div class="mui-control-content">
            <div id="scroll" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <!--<div class="noyhq">
                        <img src="images/noyhq.png" alt="">
                        <p>没有相关优惠券~</p>
                    </div>-->
                    <div class="yhq-list">
                        <div class="item" data-yhq="满2减1">
                            <img src="__STATIC__/images/pic750x200.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="item" data-yhq="满20减10">
                            <img src="__STATIC__/images/pic750x200.jpg" class="img-responsive" alt="">
                        </div>
                        <div class="item" data-yhq="满200减100">
                            <img src="__STATIC__/images/pic750x200.jpg" class="img-responsive" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    (function($) {
        $('#scroll').scroll({
            indicators: true //是否显示滚动条
        });
        /*选择支付方式*/
        var info1 = document.getElementById("pay-inner");
        mui('body').on('tap', '#choice-pay.mui-popover-action li>a.sex-c', function() {
            var a = this,
                parent;
            //根据点击按钮，反推当前是哪个actionsheet
            for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
                if (parent.classList.contains('mui-popover-action')) {

                    break;
                }
            }
            //关闭actionsheet
            mui('#' + parent.id).popover('toggle');
            info1.innerHTML =  a.innerHTML;
        });
        /*选择优惠券*/
        var info2 = document.getElementById("yhq-inner");
        mui('body').on('tap', '#choice-yhq.mui-popover-action .item', function() {
            var a = this,
                parent;
            //根据点击按钮，反推当前是哪个actionsheet
            for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
                if (parent.classList.contains('mui-popover-action')) {
                    break;
                }
            }
            //关闭actionsheet
            mui('#' + parent.id).popover('toggle');
            info2.innerHTML =  a.getAttribute("data-yhq");
        });
    })(mui);


    /**
     * 下单 发起支付 微信
     * @param cartids
     */
    function suborder(cartids) {
        var address_id = $('#address_id').val();
        var pay_type = $('#pay_type').val();
        var quan_id = $('#quan_id').val();
        var buy_msg = $('#buy_msg').val();
        var url = "{:url('index/order/createOrder')}";
        $.getJSON(url,{cart_ids:cartids,address_id:address_id,pay_type:pay_type,quan_id:quan_id,buy_msg:buy_msg},function (res) {
            alert(res.msg);
        });
    }
    
</script>
</body>
</html>